<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <link rel="stylesheet" type="text/css" href="assert/flipdown.min.css" />
    <link rel="stylesheet" type="text/css" href="assert/style.css" />
    <script type="text/javascript" src="assert/flipdown.min.js"></script>
    <script type="text/javascript" src="assert/index.js"></script>
</head>

<body class="light-theme">
    <div class="example">
        <div class="logo"><img src="assert/logo.jpeg"></div>
        <!--    <h1>Countdown to the 2022 FIFA World Cup Qatar Kick -off</h1>-->
        <p>⏰ Countdown to the 2022 FIFA World Cup Qatar Kick -off</p>
        <div class="box">
            <div class="son">
                <div class="head">
                    <div class="test">
                        EVENT COUNTDOWN
                        <!--                    <p>⏰ Countdown to the 2022 FIFA World Cup Qatar Kick -off</p>-->
                    </div>
                </div>
                <div class="con">
                    <div id="flipdown" class="flipdown flipdown__theme-light"></div>
                </div>
            </div>
        </div>
        <div class="buttons">
            <!--        <p>Version: <span id="ver"></span> ()</p>-->
            <!--        <a href="#" target="_blank" class="button"><i class="fab fa-github"></i> <span>Get started</span></a>-->
        </div>
    </div>
</body>

</html>
<script>
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>
<style>
    .box {
        text-align: center;
    }

    .head {
        height: .6rem;
        /*background-image: repeating-linear-gradient(#659295 28%, #437073 30%);*/
        background-image: repeating-linear-gradient(#437073, #659295, #437073);
        padding-top: .1rem;
    }

    .logo {
        position: relative;
        width: 4rem;
        height: 3.5rem;
        overflow: hidden;
        margin: auto;
        margin-bottom: .2rem;
    }

    .logo img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .con {
        padding: .2rem .5rem .2rem .5rem;
    }

    .test {
        background-image: linear-gradient(#4B666D, #618287, #80A1A8);
        width: 80%;
        margin: 0 auto;
        height: .5rem;
        line-height: .5rem;
        color: white;
        border-radius: .05rem;
        box-shadow: 0 0 .03rem #49646B inset;
        font-size: 0.3rem;
    }

    .flipdown {
        overflow: visible;
        /* width: 510px; */
        width: auto;
        height: 1.1rem;
    }

    .son {
        /*box-shadow: #aaa 0 1px 3px;*/
        border-radius: .05rem;
        overflow: hidden;
        background-color: #5E5E5C;
        background-image: repeating-linear-gradient(#262628 10%, #68696B, #262628);
        display: inline-block;
        margin: 0 auto;
    }

    .flipdown.flipdown__theme-light {
        font-size: 0.3rem;
    }

    .flipdown .rotor-group-heading:before {
        margin-bottom: 0.1rem;
    }

    .flipdown.flipdown__theme-dark .rotor,
    .flipdown.flipdown__theme-dark .rotor-top,
    .flipdown.flipdown__theme-dark .rotor-leaf-front {
        background-image: repeating-linear-gradient(#000106, #3c3d41);
        color: white;
    }

    .flipdown.flipdown__theme-light .rotor-bottom,
    .flipdown.flipdown__theme-light .rotor-leaf-rear {
        background-image: repeating-linear-gradient(#3c3d41, #000106);
        color: white;
    }

    .flipdown .rotor {
        position: relative;
        float: left;
        width: 1rem;
        height: .8rem;
        margin: 0 .05rem 0 0;
        border-radius: .04rem;
        font-size: 0.4rem;
        text-align: center;
        perspective: 2rem;
    }

    .flipdown .rotor-leaf-front {
        line-height: .8rem;
        border-radius: .04rem .04rem 0 0;
    }

    .flipdown .rotor:after {
        content: '';
        z-index: 2;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 1rem;
        height: 0.4rem;
        border-radius: 0 0 .04rem .04rem;
    }

    .flipdown .rotor-group {
        padding-right: 0.3rem;
    }

    .flipdown .rotor-group-heading:before {
        height: .3rem;
        line-height: .3rem;
    }

    .flipdown .rotor-leaf-front,
    .flipdown .rotor-leaf-rear {
        overflow: hidden;
        position: absolute;
        width: 1rem;
        height: .4rem;
        margin: 0;
        transform: rotateX(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .flipdown .rotor-top,
    .flipdown .rotor-bottom {
        overflow: hidden;
        position: absolute;
        width: 1rem;
        height: .4rem;
    }

    .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
        content: '';
        position: absolute;
        bottom: .5rem;
        left: 2.15rem;
        width: .1rem;
        height: .1rem;
        border-radius: 50%;
    }

    .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before {
        content: '';
        position: absolute;
        bottom: .2rem;
        left: 2.15rem;
        width: .1rem;
        height: .1rem;
        border-radius: 50%;
    }
</style>